<template>
  <div class="monitor" :class="{'navMenuState': navMenuState}">
    <div class="loading"
         v-loading="loading"
         :element-loading-text="$t('public.loadingText')"
         v-if="loading">
    </div>
    <el-tabs v-model="activeName" @tab-click="tab" v-if="!loading">
      <!--<el-tab-pane :label="$t('monitor.table')" name="table" style="margin-left:12px">-->
      <!--</el-tab-pane>-->
      <!--<el-tab-pane :label="$t('monitor.chart')" name="chart">-->
      <!--</el-tab-pane>-->
      <!--<el-tab-pane :label="$t('monitor.'+ item.label)" name="cdrpeer">-->
      <!--</el-tab-pane>-->
      <el-tab-pane v-for="item in menu" :label="item.label" :name="item.name">
      </el-tab-pane>
      <el-tab-pane  :name="'add'" v-if="$store.state.session.user.type === 'manager'">
        <span slot="label"><i class="iconfont icon-peizhi"></i></span>
        <table-option v-show="addOptions" @updateTabs="updateTabs" v-if="firstIn"></table-option>
      </el-tab-pane>
      <keep-alive>
        <component :is="activeComponent" :filter="filterData" v-show="!addOptions" ref="subComponent"></component>
      </keep-alive>
    </el-tabs>
  </div>
</template>
<script>
  import { isHasMenu } from '@/utils/m7Utils'
  import { addZhuGeTrack } from '@/utils/addZhuGeTrack.js'
//  import MonitorTemp from './MonitorTableTemp.vue'
//  import MonitorTable from './MonitorTableNew.vue'
//  import MonitorChart from './MonitorChart.vue'
//  import MonitorCdrpeer from './MonitorCdrpeer.vue'
//  import TableOption from './TableOption.vue'
//  import MonitorTempIm from './MonitorTableTempIm.vue'
//  import MonitorTableIm from './MonitorTableIm.vue'
  export default {
    name: 'monitor',
    data () {
      return {
        activeName: '',
        loading: true,
        addOptions: false,
        firstIn: false,
        currentRoute: '',
        activeComponent: '',
        menu: [
          {name: 'MonitorTable', label: this.$t('monitor.table'), fun: 'monitor_platform'},
          {name: 'MonitorTableIm', label: this.$t('monitor.tableIm'), fun: 'monitor_platform'},
          {name: 'MonitorChart', label: this.$t('monitor.chart'), fun: 'monitor_chart'},
          {name: 'MonitorCdrpeer', label: this.$t('monitor.cdrpeer'), fun: 'monitor_log_record'},
          {name: 'MonitorRemoteControl', label: this.$t('monitor.remoteControl'), fun: 'monitor_platform'}
        ],
        options: [
        ],
        filterData: {}
      }
    },
    components: {
      MonitorRemoteControl: function (resolve) {
        // 异步组件写法
        require(['./MonitorRemoteControl.vue'], resolve)
      },
      MonitorTemp: function (resolve) {
        // 异步组件写法
        require(['./MonitorTableTemp.vue'], resolve)
      },
      MonitorTempIm: function (resolve) {
        // 异步组件写法
        require(['./MonitorTableTempIm.vue'], resolve)
      },
      MonitorTable: function (resolve) {
        // 异步组件写法
        require(['./MonitorTableNew.vue'], resolve)
      },
      MonitorTableIm: function (resolve) {
        // 异步组件写法
        require(['./MonitorTableIm.vue'], resolve)
      },
      MonitorChart: function (resolve) {
        // 异步组件写法
        require(['./MonitorChart.vue'], resolve)
      },
      MonitorCdrpeer: function (resolve) {
        // 异步组件写法
        require(['./MonitorCdrpeer.vue'], resolve)
      },
      TableOption: function (resolve) {
        // 异步组件写法
        require(['./TableOption.vue'], resolve)
      }
    },
    computed: {
      navMenuState () {
        return this.$store.state.navMenuState || false
      }
    },
    created () {
//      this.$router.push({ path: '/index/monitor/table' })
    },
    methods: {
      updateTabs () {
        this.$store.dispatch('getMonitorList', {})
          .then(resp => {
            if (resp.success) {
              this.menu = [
                {name: 'MonitorTable', label: this.$t('monitor.table'), fun: 'monitor_platform'},
                {name: 'MonitorTableIm', label: this.$t('monitor.tableIm'), fun: 'monitor_platform'},
                {name: 'MonitorChart', label: this.$t('monitor.chart'), fun: 'monitor_chart'},
                {name: 'MonitorCdrpeer', label: this.$t('monitor.cdrpeer'), fun: 'monitor_log_record'},
                {name: 'MonitorRemoteControl', label: this.$t('monitor.remoteControl'), fun: 'monitor_platform'}
              ]
              resp.list.forEach(item => {
                item.callFl = true
                item.multiChannelFl = true
                item.callSkillFl = true
                item.multiChannelSkillFl = true
                item.outCallFl = true
                item.agentFl = true
              })
              console.log(resp.list)
              this.options = resp.list
              this.isMenu(true)
            }
          })
      },
      isMenu (flag) {
        this.menu = this.menu.concat(this.options.map((item) => {
          if (item.monitorType === 'multi') {
            return {name: 'MonitorTempIm$' + item._id, label: item.name}
          } else {
            return {name: 'MonitorTemp$' + item._id, label: item.name}
          }
        }))
        this.menu = this.menu.filter(item => {
          if (item.name === 'MonitorRemoteControl') {
            let exten_visible = this.$store.state.session.account.exten_visible || []
            return this.$store.state.session.user.type === 'admin' || exten_visible.includes(this.$store.state.session.sessionId)
          }
          return !item.fun || (item.fun && isHasMenu(item.fun, this.$store.state.session.user))
        })
        console.log(this.activeName)
        if (!flag) {
          this.activeName = this.menu[0].name
          this.tab(this.menu[0])
        }
//        this.$router.push({ path: '/index/monitor/' + this.activeName })
      },
      tab (tab, event) {
        let name = tab.name.split('$')
        addZhuGeTrack(name[0])
        this.activeComponent = name[0] === 'add' ? '' : name[0]
        if (name[0] === 'add') {
          this.firstIn = true
          this.addOptions = true
//          this.$router.push({ path: '/index/monitor/' + tab.name })
        } else if (name[0] === 'MonitorTemp' || name[0] === 'MonitorTempIm') {
          this.options.some((item) => {
            if (name[1] === item._id) {
              this.filterData = item
              return true
            }
          })
          this.addOptions = false
        } else {
          this.addOptions = false
        }
      }
    },
    beforeRouteLeave (to, from, next) {
      this.currentRoute = from.fullPath

      if (this.$refs.subComponent && this.$refs.subComponent.minAndMax) {
        this.$refs.subComponent.minAndMax.min = 0
        this.$refs.subComponent.minAndMax.max = 30
      }
      next()
    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        if (vm.currentRoute) {
          vm.$router.push({path: vm.currentRoute})
        }
      })
    },
    provide () {
      let user = this.$store.state.session.user || {}
      let show = user.type === 'admin' ? true : !isHasMenu('func_forbid_config_header_monitor', user)
      return {
        configHeaderShow: show
      }
    },
    beforeMount () {
      this.$store.commit('monitor/MONITOR_MODULE_OPEN', {type: 'call', status: true})
      let self = this
//      let p1 = this.$store.dispatch('imMonitorInit', {})
//      let p2 = this.$store.dispatch('getCache', {type: 'mailQueues'})
//      let p3 = this.$store.dispatch('getCache', {type: 'onlineChannelAgent'})
      let p4 = this.$store.dispatch('getCache', {type: 'agents'})
      let p5 = this.$store.dispatch('getMonitorList', {})
      Promise.all([p4, p5]).then(([p4, p5]) => {
        self.loading = false
        console.log(p5.list)
        p5.list.forEach(item => {
          item.callFl = true
          item.multiChannelFl = true
          item.callSkillFl = true
          item.multiChannelSkillFl = true
          item.outCallFl = true
          item.agentFl = true
        })
        this.options = p5.list
        self.isMenu()
//        let pathArr = self.$route.fullPath.split('/')
//        if (pathArr.length === 4) {
//          self.activeName = pathArr[3]
//          self.$router.push({path: '/index/monitor/' + pathArr[3]})
//        } else {
//          self.$router.push({ path: '/index/monitor/table' })
//        }
      })
    }
  }
</script>
<style lang="stylus">
  .moniter-table
    .el-table
      td
        padding 9px 10px

</style>
<style lang="stylus" scoped>
  @import '../../../assets/common.styl';
  .monitor
    height calc(100vh - 53px)
    background $cf-white
    padding-top 2px
  .loading
    height: 100vh
  .el-tabs__item
    margin-left: 12px
</style>
